<template>
  <div style="width:100%;height:800px;">
    <div id="viewerContainer" style="width:100%;height:calc(100%);"></div>
  </div>
</template>
<script lang="ts" setup>
import '@grapecity/ar-viewer/dist/jsViewer.min.js';
import '@grapecity/ar-viewer/dist/jsViewer.min.css';
import { Colgroup } from 'vxe-table';
import { ref, reactive, getCurrentInstance, onMounted, computed, toRefs, watch, defineProps } from 'vue';
import { IsEmpty } from '@/utils/common';
let { proxy }: any = getCurrentInstance();
let win = window;
let reportId = '';
let viewer = null;

let props = defineProps({
  reportName: String,
  reportParamter: Object,
  isShowParamPanel: Boolean,
  patientId: String
});

//暴露属性和方法
defineExpose({
  reloadRpt,
  print,
  doExport,
  doPdf
});

onMounted(() => {
  initViewer();
});

watch(
  () => proxy.reportParamter,
  (n, o) => {
    if (viewer) {
      reportId = n.reportId;
      reloadRpt();
    } else {
      reportId = n.reportId;
      setTimeout(() => {
        initViewer(() => {
          reloadRpt();
        });
      }, 300);
    }
  },
  {
    immediate: true,
    deep: true
  }
);

function initViewer(callback = null) {
  if (viewer) {
    if (callback) {
      callback();
    }
    return;
  }
  viewer = new GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    reportService: {
      url: window.apiUrl.VUE_APP_PRINT_URL + '/api/reporting'
    },
    parametersPanel: {
      location: win.params.parametersPanel
    },
    action: (e, v) => {
      //ToDo
    },
    reportLoaded: (e) => {
      //ToDo
    },
    documentLoaded: (e) => {
      try {
        const menu = document.getElementsByClassName('gcv-menu');
        if (win.params && win.params.parametersPanel === 'left' && (isShowParamPanel || true)) {
          const btns = document.getElementsByClassName('gc-btn gc-btn--block gc-btn--with-icon gc-btn--accent gc-size-lg');
          for (const element of btns) {
            console.log(element.getAttribute('title'));
            if (element.getAttribute('title') === '参数面板') {
              element.click();
            }
          }
          if (win.params.isOpenedparametersPanel && isShowParamPanel) {
            const pins = document.getElementsByClassName('gc-btn gc-btn-pin gc-btn--block gc-btn--with-icon gc-btn--transparent');
            for (const element of pins) {
              if (element.getAttribute('title') === 'Pin') {
                element.click();
              }
            }
          }
        } else if (win.params.parametersPanel === 'top') {
          const btns = document.getElementsByClassName('gc-btn gc-btn--with-icon gc-btn--transparent gc-rounded');
          for (const element of btns) {
            if (element.getAttribute('title') === '参数面板') {
              element.click();
            }
            // if (element.getAttribute("title") === "缩小") {
            //   element.click();
            //   element.click();
            // }
            // if (element.getAttribute("title") === "全屏") {
            //   element.click();
            // }
          }
        }
        if (callback) {
          callback();
        }
      } catch (error) {
        //ToDo
      }
    },
    error: (error) => {
      if (error.message) {
        //ToDo
      }
    }
  });
}
function reloadRpt() {
  if (IsEmpty(props.reportParamter.reportId)) {
    return;
  }
  if (IsEmpty(reportId)) {
    return;
  }
  viewer.openReport(props.reportParamter.reportId, props.reportParamter.reportParams);
  //潍坊检测任务
  //console.log("参数", reportParamter.reportParams);
  //viewer.openReport('AcmeStore.rdlx', [{ Name: 'id', Values: ['1550369798817947650'] }]);
}
function reloadRpt1() {
  if (IsEmpty(reportId)) {
    return;
  }
  viewer.openReport(reportId, null);
  //潍坊检测任务
  //console.log("参数", reportParamter.reportParams);
  //viewer.openReport('AcmeStore.rdlx', [{ Name: 'id', Values: ['1550369798817947650'] }]);
}

// 导出excel
function print() {
  viewer.print();
}
// 导出excel
function doExport() {
  viewer.export('xlsx', '导出excel', true, { Title: 'name', MultiSheet: false });
}
// 导出pdf
function doPdf() {
  viewer.export('Pdf', '导出pdf', true, { Title: 'name' });
}
function printRpt() {
  viewer.print();
}
</script>
<style>
#viewerContainer {
  width: 99%;
  height: calc(100vh - 50px);
}

:v-deep(.ar-report-viewer .gc-viewer) {
  background-color: #fafefe !important;
  width: 99.7% !important;
}

:v-deep(.ar-report-viewer .gc-menu__panel-container) {
  background-color: #fafefe !important;
}

:v-deep(.ar-report-viewer .gc-menu__btn-container) {
  background-color: #fafefe !important;
}

:v-deep(.ar-report-viewer .gc-btn--accent) {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color: #205f78 !important;
}

:v-deep(.ar-report-viewer .gcv-pageview--margin > *) {
  margin: 0 !important;
}
</style>
